<template>
<div>
  <div>
    <Select v-model="type" style="width:200px;margin-right: 20px">
      <Option :value="'1'" >事项办理列表</Option>
      <Option :value="'2'">社区自治列表</Option>
      <Option :value="'3'">活动列表</Option>
    </Select>
    <template>
      <Input v-model="idCard" placeholder="请输入身份证号" style="width: 200px;margin-right: 20px" />
    </template>
      <Select style="width: 200px;margin-right: 20px" v-model="area_id" @on-change="findDistrictList(3,area_id)">
        <Option v-for="item in List1" :value="item.id" :key="item.id">{{ item.name }}</Option>
      </Select>
      <Select style="width: 200px;margin-right: 20px" v-model="street_id" @on-change="findDistrictList(4,street_id)">
        <Option v-for="item in List2" :value="item.id" :key="item.id">{{ item.name }}</Option>
      </Select>
      <Select style="width: 200px;margin-right: 20px" v-model="code">
        <Option v-for="item in List3" :value="item.code" :key="item.id">{{ item.name }}</Option>
      </Select>
    <Button type="primary" @click="select">搜索</Button>
    <template>
      <Table style="margin-top: 20px" :columns="columns" :data="data">
        <template slot-scope="{ row, index }" slot="state">
          <span v-if="row.state==='9'">待提报</span>
          <span v-if="row.state==='0'">待受理</span>
          <span v-if="row.state==='1'">处理中</span>
          <span v-if="row.state==='7'">待办结</span>
          <span v-if="row.state==='8'">转件待受理</span>
          <span v-if="row.state==='81'">转件处理中</span>
          <span v-if="row.state==='82'">转件待审核</span>
          <span v-if="row.state==='2'">成功办结</span>
          <span v-if="row.state==='3'">办结失败</span>
          <span v-if="row.state==='5'">调用不通过</span>
        </template>
        <template slot-scope="{ row, index }" slot="complete_time1">
          <span>{{row.complete_time1}}</span>
        </template>
        <template slot-scope="{ row, index }" slot="isSuperior">
          <span v-if="row.isSuperior==='1'">是</span>
          <span v-if="row.isSuperior==='0'">否</span>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <Button type="primary" size="small" style="margin-right: 5px" @click="detail(row)">详情</Button>
        </template>
      </Table>
    </template>
  </div>
  <Modal
    v-model="modal1"
    width="800"
    title="详情">
    <Form :model="row" :label-width="100">
      <FormItem label="事项名称：">
        <Input v-model="row.title"></Input>
      </FormItem>
      <FormItem label="事项编号：">
        <Input v-model="row.item_id"></Input>
      </FormItem>
      <FormItem label="承诺期限：">
        <Input v-model="row.PROMISE_DAY"></Input>
      </FormItem>
      <FormItem label="申请编号：">
        <Input v-model="row.code"></Input>
      </FormItem>
      <FormItem label="创建时间：">
        <Input v-model="row.create_time"></Input>
      </FormItem>
      <FormItem label="机构名称：">
        <Input v-model="row.department_name"></Input>
      </FormItem>
      <FormItem label="申请人姓名：">
        <Input v-model="row.name"></Input>
      </FormItem>
      <FormItem label="身份证号：">
        <Input v-model="row.cardno"></Input>
      </FormItem>
      <FormItem label="电话：">
        <Input v-model="row.mobile"></Input>
      </FormItem>
      <FormItem label="是否挂起：">
        <Input v-model="row.isHang"></Input>
      </FormItem>
      <template>
        <Table style="margin-top: 20px" :columns="FormColumns1" :data="row.datalist">
        </Table>
      </template>
    </Form>
  </Modal>
  <Modal
    v-model="modal2"
    width="800"
    title="详情">
    <Form :model="row" :label-width="100">
      <FormItem label="问题名称：">
        <Input v-model="row.title"></Input>
      </FormItem>
      <FormItem label="社区名称：">
        <Input v-model="row.community"></Input>
      </FormItem>
      <FormItem label="问题描述：">
        <Input v-model="row.question_info"></Input>
      </FormItem>
      <FormItem label="问题创建人：">
        <Input v-model="row.person"></Input>
      </FormItem>
      <FormItem label="抉择操作人：">
        <Input v-model="row.choose_man"></Input>
      </FormItem>
      <FormItem label="抉择描述：">
        <Input v-model="row.choose_context"></Input>
      </FormItem>
      <FormItem label="完成时间：">
        <Input v-model="row.complete_time1"></Input>
      </FormItem>
      <FormItem label="事件状态：">
        <span v-if="row.state==='0'">征集中</span>
        <span v-if="row.state==='1'">已完成</span>
        <span v-if="row.state==='2'">街道审核</span>
        <span v-if="row.state==='3'">处理中</span>
      </FormItem>
      <template>
        <Table style="margin-top: 20px" :columns="FormColumns2" :data="row.coorlist">
          <template slot-scope="{ row, index }" slot="coordinate_status">
            <span v-if="row.coordinate_status==='1'">完成</span>
            <span v-if="row.coordinate_status==='0'">征集中</span>
            <span v-if="row.coordinate_status==='2'">街道审核</span>
            <span v-if="row.coordinate_status==='3'">处理中</span>
          </template>
        </Table>
      </template>
    </Form>
  </Modal>
  <Modal
    v-model="modal3"
    width="800"
    title="详情">
    <Form :model="row" :label-width="100">
      <FormItem label="活动名称：">
        <Input v-model="row.activity_theme"></Input>
      </FormItem>
      <FormItem label="活动目的：">
        <Input v-model="row.activity_objective"></Input>
      </FormItem>
      <FormItem label="活动要求：">
        <Input v-model="row.activity_requirement"></Input>
      </FormItem>
      <FormItem label="活动内容：">
        <Input v-model="row.activity_content"></Input>
      </FormItem>
      <FormItem label="开始时间：">
        <Input v-model="row.start_time"></Input>
      </FormItem>
      <FormItem label="创建时间：">
        <Input v-model="row.create_time"></Input>
      </FormItem>
      <FormItem label="志愿者：">
        <Input v-model="row.persons"></Input>
      </FormItem>
    </Form>
  </Modal>
</div>
</template>

<script>
import { getManagementInfo } from '@/api/eventlist'
import { findSubordinateList } from '../../../api/eventlist'

export default {
  name: 'index',
  data () {
    return {
      area_id: '',
      street_id: '',
      community_id: '',
      modal1: false,
      modal2: false,
      modal3: false,
      row: {},
      type: '1',
      code: '',
      idCard: '',
      columns: [],
      columns1: [
        {
          title: '申请编号',
          key: 'code'
        },
        {
          title: '事项编号',
          key: 'item_id'
        },
        {
          title: '申请人姓名',
          key: 'name'
        },
        {
          title: '身份证号',
          key: 'cardno'
        },
        {
          title: '社区编号',
          key: 'company_code'
        },
        {
          title: '状态编码 ',
          slot: 'state'
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      columns2: [
        {
          title: '问题名称',
          key: 'title'
        },
        {
          title: '社区名称',
          key: 'community'
        },
        {
          title: '是否提交街道',
          slot: 'isSuperior'
        },
        {
          title: '完成时间',
          slot: 'complete_time1'
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      columns3: [
        {
          title: '活动名称',
          key: 'activity_theme'
        },
        {
          title: '活动目的',
          key: 'activity_objective'
        },
        {
          title: '活动要求',
          key: 'activity_requirement'
        },
        {
          title: '开始时间',
          key: 'start_time'
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      FormColumns1: [
        {
          title: '状态',
          key: 'process_name'
        },
        {
          title: '申请人姓名',
          key: 'name'
        },
        {
          title: '审批人',
          key: 'handle_byname'
        },
        {
          title: '处理社区',
          key: 'accept_company_name'
        }
      ],
      FormColumns2: [
        {
          title: '所属问题',
          key: 'question_id'
        },
        {
          title: '协调内容',
          key: 'coordinate_context'
        },
        {
          title: '协调状态',
          slot: 'coordinate_status'
        },
        {
          title: '创建人',
          key: 'create_by'
        },
        {
          title: '协调人',
          key: 'coordinate_man'
        }
      ],
      data: [],
      List1: [],
      List2: [],
      List3: []
    }
  },
  methods: {
    findDistrictList (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      findSubordinateList(data).then(ret => {
        if (ret.data.errcode === 0) {
          if (e1 === 2) {
            this.List1 = ret.data.data
          } else if (e1 === 3) {
            this.List2 = ret.data.data
          } else if (e1 === 4) {
            this.List3 = ret.data.data
          }
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    init () {
      let data = {
        type: this.type,
        company_code: this.code,
        idCard: this.idCard
      }
      if (data.type === '1') {
        this.columns = this.columns1
      } else if (data.type === '2') {
        this.columns = this.columns2
      } else if (data.type === '3') {
        this.columns = this.columns3
      }
      getManagementInfo(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.data = ret.data.data
          if (data.type === '2') {
            this.data.forEach(item => {
              if (item.complete_time !== undefined) {
                item.complete_time1 = this.format(item.complete_time)
              }
            })
          }
        } else {
          this.$Notice.error({
            title: '查询列表失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    select () {
      this.init()
    },
    detail (e) {
      this.row = {}
      this.row = e
      if (this.type === '1') {
        this.modal1 = true
      } else if (this.type === '2') {
        this.modal2 = true
      } else if (this.type === '3') {
        this.modal3 = true
      }
    },
    add0 (m) { return m < 10 ? '0' + m : m },
    format (e) {
      var time = new Date(e)
      var y = time.getFullYear()
      var m = time.getMonth() + 1
      var d = time.getDate()
      var h = time.getHours()
      var mm = time.getMinutes()
      var s = time.getSeconds()
      return y + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + this.add0(h) + ':' + this.add0(mm) + ':' + this.add0(s)
    }

  },
  mounted () {
    this.init()
    this.findDistrictList(2, '999999999')
  }
}
</script>

<style scoped>

</style>
